<template>
  <div class="box">
    <div class="class">
      <ul class="uls1">
        <li @click="classhandel" ref="s1">前端技术</li>
        <li @click="classhandel" ref="s2">后端技术</li>
        <li @click="classhandel" ref="s3">其它技术</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getHomeArticals } from 'com/shuju'
import { mapMutations } from 'vuex'
export default {
  name: 'ArticalHeader',
  data () {
    return {
    }
  },
  methods: {
    ...mapMutations(['changeArticalDisplay']),
    classhandel () {
      var curentjishu = event.target.innerText
      if (event.target.innerText === '前端技术') {
        this.shows1 = true
        this.shows2 = false
        this.$refs.s1.style.borderTop = '5px solid rgb(60,141,188)'
        this.$refs.s2.style.borderTop = '5px solid rgb(254,254,254)'
        this.$refs.s3.style.borderTop = '5px solid rgb(254,254,254)'
      } else if (event.target.innerText === '后端技术') {
        this.shows1 = false
        this.shows2 = true
        this.$refs.s2.style.borderTop = '5px solid rgb(60,141,188)'
        this.$refs.s1.style.borderTop = '5px solid rgb(254,254,254)'
        this.$refs.s3.style.borderTop = '5px solid rgb(254,254,254)'
      } else if (event.target.innerText === '其它技术') {
        this.$refs.s1.style.borderTop = '5px solid rgb(254,254,254)'
        this.$refs.s2.style.borderTop = '5px solid rgb(254,254,254)'
        this.$refs.s3.style.borderTop = '5px solid rgb(60,141,188)'
      }
      const datass = new FormData()
      datass.set('page', 0)
      datass.set('size', 5)
      datass.set('keywords', 'category')
      datass.set('categoryName', curentjishu)
      this.changeArticalDisplay(curentjishu)
      getHomeArticals(datass, this)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .box{
    width: 1200px
    height: auto
    position: relative
    margin: 0 auto
    margin-top: .4rem
    content:" "
    display: table
    clear:both
    .class{
      border: 1px solid rgb(245,245,245)
      background-color: rgb(254,254,254)
      width: 1200px
      font-size: .4rem
      height 65px
      .uls1{
        list-style: none
        padding: 0
        margin: 0
        height: 100%
        width: 100%
        display: flex
        flex-wrap: wrap
        li{
          cursor: pointer
          width: 100px
          height: cale(100% - .3rem)
          text-align: center
          line-height: .6rem
          padding: .3rem
          padding-bottom: 0
          border-top: 5px solid rgb(254,254,254)
        }
        li:nth-child(1){
          border-top: 5px solid rgb(60,141,188)
        }
      }

    }
  }
</style>
